<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>串口服务器测试程序</title>
    <!--下面是bootsrap模板-->
    <meta charset="utf-8">
    <!--默认高速模式-->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--禁止缩放,在手机上看上去像是原生应用-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
    <link href="/bootstrap/css/bootstrap-combobox.css" rel="stylesheet">
    <link rel="stylesheet" href="/bootstrap/css/font-awesome.css">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1, user-scalable=no">-->
    <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
    <!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的， 如果不用可移除 -->
    <!-- 注意:Respond.js不支持file:// 方式的访问 -->
    <!--[if lt IE 9]>
        <script src="/bootstrap/js/html5shiv.js"></script>
        <script src="/bootstrap/js/respond.min.js">
        </script>
        <![endif]-->
    <style type="text/css">
        .help-inline {
            display: inline-block;
            padding-left: 5px;
            color: #737373;
        }
        
        body {
            margin: 10px;
        }
        
        .panel-group {
            max-height: 770px;
            overflow: auto;
        }
        
        .leftMenu {
            margin: 10px;
            margin-top: 5px;
        }
        
        .leftMenu .panel-heading {
            font-size: 14px;
            padding-left: 20px;
            height: 36px;
            line-height: 36px;
            color: white;
            position: relative;
            cursor: pointer;
        }
        /*转成手形图标*/
        
        .leftMenu .panel-heading span {
            position: absolute;
            right: 10px;
            top: 12px;
        }
        
        .leftMenu .menu-item-left {
            padding: 2px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 6px;
        }
        
        .leftMenu .menu-item-left:hover {
            background: #C4E3F3;
            border: 1px solid #1E90FF;
        }
    </style>
</head>

<body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/bootstrap/js/jquery.js"></script>
    <script src="/bootstrap/js/jquery.form.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/bootstrap/js/bootstrap.js"></script>
    <script src="/bootstrap/js/bootstrap-combobox.js"></script>
    <script type="text/javascript">
        //$(document).ready(function () {
        //    $('.combobox').combobox();
        //});
    </script>
    <div class="page-header ">
        <h2>串口服务器配置<small>V1.0</small></h2>
    </div>
    <div class=""></div>
    <div id="contain" class="container-fluid ">




        <ul class="nav nav-tabs navbar-default navbar-left nav-stacked">
            <li class="active "><a href="#">Home</a></li>
            <li><a href="#">SVN</a></li>
            <li class="disabled"><a href="#">iOS</a></li>
            <li class="dropdown">
                <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
                <ul class="col-md-10 dropdown-menu">
                    <li><a href="##">CSS3</a></li>
                    <li><a href="##">JavaScript</a></li>
                    <li class="disabled"><a href="##">PHP</a></li>
                </ul>
            </li>
            <li><a href="#">Java</a></li>

        </ul>







    </div>
    <div class="navbar navbar-default " role="navigation">

        <div class="navbar-header">
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <ul class="nav navbar-nav nav-stacked">
            <li class="active"><a href="##">网站首页</a></li>
            <li class="dropdown">
                <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="##">CSS3</a></li>
                    <li><a href="##">JavaScript</a></li>
                    <li class="disabled"><a href="##">PHP</a></li>
                </ul>
            </li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li <a href="##">关于我们</a>
            </li>
        </ul>




        <form action="##" class="navbar-form navbar-right" rol="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="请输入关键词" />
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
        </form>
    </div>

    <div class="row">
        <div class="col-md-2">
            <div class="panel-group table-responsive" role="tablist">
                <div class="panel panel-primary leftMenu">
                    <!-- 利用data-target指定要折叠的分组列表 -->
                    <div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse" data-target="#collapseListGroup1" role="tab">
                        <h4 class="panel-title">
                            分组1
                            <span class="glyphicon glyphicon-chevron-up right"></span>
                        </h4>
                    </div>
                    <!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
                    <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <!-- 利用data-target指定URL -->
                                <button class="menu-item-left" data-target="test2.html">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-2
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-3
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-4
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-5
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-6
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-7
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-8
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-9
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-10
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-11
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--panel end-->
                <div class="panel panel-primary leftMenu">
                    <div class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse" data-target="#collapseListGroup2" role="tab">
                        <h4 class="panel-title">
                            分组2
                            <span class="glyphicon glyphicon-chevron-down right"></span>
                        </h4>
                    </div>
                    <div id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading2">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项2-1
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项2-2
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项2-3
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项2-4
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-10">
            内容
        </div>
    </div>
    <!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.min.js "></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js "></script>
    <script>
        $(function() {
            $(".panel-heading").click(function(e) {
                /*切换折叠指示图标*/
                $(this).find("span").toggleClass("glyphicon- chevron-down");
                $(this).find("span").toggleClass("glyphicon-chevron-up");
            });
        });
    </script>
</body>

</html>